<template>
  <view class="container">
    <!-- 费率渠道 -->
    <view class="benefit_tab u-margin-bottom-20">
      <u-tabs-swiper
        ref="uTabs"
        :list="agentPolicyCostInfo"
        name="policyName"
        :current="current"
        @change="change"
        :is-scroll="true"
        swiperWidth="750"
        :show-bar="false"
        active-color="#9D60FF"
      ></u-tabs-swiper>
    </view>
    <!-- 税点内容 -->
    <swiper
      :current="swiperCurrent"
      @animationfinish="animationfinish"
      class="swiper"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in agentPolicyCostInfo"
        :key="index"
      >
        <scroll-view scroll-y style="height: 100%; width: 100%">
          <view class="">
            <view class="flex list-item">
              <view class="flex-1"> 税点 </view>
              <view class="config_content">
                <u-input
                  class="config_input"
                  :border="border"
                  v-model="item.taxPoint"
                  disabled
                ></u-input>
                <text> % </text>
              </view>
            </view>
            <!-- 费率政策内容 -->
            <view class="" v-for="(_item, index) in item.costList" :key="index">
              <!-- POS -->
              <view class="" v-if="_item.payTypeCode == 'POS'">
                <view class="" v-if="_item.cardType == '1'">
                  <view class="flex list-item">
                    <view class="flex-1"> 刷卡-贷记卡-T0 </view>
                    <view class="config_content">
                      <u-input
                        class="config_input"
                        :border="border"
                        placeholder=""
                        v-model="_item.t0Rate"
                        :disabled="isDisabled"
                      ></u-input>
                      <text> % </text>
                      <text v-if="isConditionMet !== true"> + </text>
                      <u-input
                        v-if="isConditionMet !== true"
                        class="config_input"
                        :border="border"
                        placeholder=""
                        v-model="_item.cashFee"
                        :disabled="isDisabled"
                      ></u-input>
                      <text v-if="isConditionMet !== true"> 元 </text>
                    </view>
                  </view>
                  <view class="flex list-item">
                    <view class="flex-1"> 刷卡-贷记卡-T1 </view>
                    <view class="config_content">
                      <u-input
                        class="config_input"
                        :border="border"
                        placeholder=""
                        v-model="_item.t1Rate"
                        :disabled="isDisabled"
                      ></u-input>
                      <text> % </text>
                    </view>
                  </view>
                </view>
                <view class="" v-if="_item.cardType == '2'">
                  <view class="flex list-item">
                    <view class="flex-1"> 刷卡-借记卡-T0 </view>
                    <view class="config_content">
                      <u-input
                        class="config_input"
                        :border="border"
                        placeholder=""
                        v-model="_item.t0Rate"
                        :disabled="isDisabled"
                      ></u-input>
                      <text> % + </text>
                      <u-input
                        class="config_input"
                        :border="border"
                        placeholder=""
                        v-model="_item.cashFee"
                        :disabled="isDisabled"
                      ></u-input>
                      <text> 元 </text>
                    </view>
                  </view>
                  <view class="flex list-item">
                    <view class="flex-1"> 刷卡-借记卡-T1 </view>
                    <view class="config_content">
                      <u-input
                        class="config_input"
                        :border="border"
                        v-model="_item.t1Rate"
                        placeholder=""
                        :disabled="isDisabled"
                      ></u-input>
                      <text> % </text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="" v-if="_item.payTypeCode == 'WX'">
                <view class="flex list-item">
                  <view class="flex-1"> 微信 </view>
                  <view class="config_content">
                    <u-input
                      class="config_input"
                      placeholder=""
                      :border="border"
                      v-model="_item.t1Rate"
                      :disabled="isDisabled"
                    ></u-input>
                    <text> % </text>
                  </view>
                </view>
              </view>
              <view class="" v-if="_item.payTypeCode == 'ZFB'">
                <view class="flex list-item">
                  <view class="flex-1"> 支付宝 </view>
                  <view class="config_content">
                    <u-input
                      class="config_input"
                      placeholder=""
                      :border="border"
                      v-model="_item.t1Rate"
                      :disabled="isDisabled"
                    ></u-input>
                    <text> % </text>
                  </view>
                </view>
              </view>
              <view class="" v-if="_item.payTypeCode == 'YL_CODE_LESS'">
                <view class="flex list-item">
                  <view class="flex-1"> 银联二维码（≤1000元） </view>
                  <view class="config_content">
                    <u-input
                      class="config_input"
                      placeholder=""
                      :border="border"
                      v-model="_item.t1Rate"
                      :disabled="isDisabled"
                    ></u-input>
                    <text> % </text>
                  </view>
                </view>
              </view>
              <view class="" v-if="_item.payTypeCode == 'YL_CODE_MORE'">
                <view class="flex list-item">
                  <view class="flex-1"> 银联二维码（＞1000元） </view>
                  <view class="config_content">
                    <u-input
                      class="config_input"
                      placeholder=""
                      :border="border"
                      v-model="_item.t1Rate"
                      :disabled="isDisabled"
                    ></u-input>
                    <text> % </text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <!-- 操作按钮 -->
    <view class="handle">
      <u-button v-if="isConditionMet" @click="handleAdd" class="anniu custom">
        新增业务
      </u-button>
      <u-button
        v-if="isConditionMet"
        @click="handleEdit"
        class="anniu"
        type="warning"
      >
        修改成本
      </u-button>
      <u-button
        v-else-if="isConditionMet2"
        @click="handleAddEdit"
        class="anniu"
        type="warning"
      >
        提交修改
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      agentPolicyCostInfo: [],
      current: 0,
      swiperCurrent: 0,
      border: true, //input边框
      isDisabled: true, // input框禁用
      isConditionMet: true, // 条件变量，按钮权限切换
      isConditionMet2: true, // 条件变量，按钮权限切换
      agentNo: '', //代理商编号
    };
  },
  // onLoad自带一个参数
  onLoad(options) {
    // 获取代理商编号
    this.agentNo = options.agentNo;
    // 调用查询代理商已有的成本配置
    this.getQueryAgentHasCostConfigList();
  },
  methods: {
    // 查询代理商已有的成本配置
    async getQueryAgentHasCostConfigList() {
      const result = await this.$zx.common_api.getQueryAgentHasCostConfig(
        this.agentNo
      );
      console.log('getQueryAgentHasCostConfig----->230', result);
      // 已有成本赋值给agentPolicyCostInfo
      this.agentPolicyCostInfo = result;
      // 遍历数组列表过滤NFC数据
      result.forEach((item) => {
        let newList = item.costList.filter((cost) => {
          return (
            cost.payTypeCode !== 'NFC' && cost.payTypeCode !== 'MOBILE_PAY'
          );
        });
        item.costList = newList;
      });
    },
    // 切换渠道
    change(index) {
      this.swiperCurrent = index;
      console.log('index----->236', index);
    },
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      // 切换费率后重新赋值给list
      this.list = this.agentPolicyCostInfo[this.current].costList;
    },
    // 新增业务事件
    handleAdd() {
      console.log('handleAdd----->', 123);
      this.$u.route({
        url: 'pages/main/agent/component/addBusiness',
        params: {
          agentNo: this.agentNo, // 传递代理商编号
        },
      });
    },
    // 编辑成本事件
    handleEdit() {
      // 切换条件，禁用input框
      this.isDisabled = !this.isDisabled;
      // 切换条件，按钮权限切换
      this.isConditionMet = !this.isConditionMet;
    },
    // 提交修改成本事件
    async handleAddEdit() {
      // 切换条件，禁用input框
      this.isDisabled = !this.isDisabled;
      // 切换条件，按钮权限切换
      this.isConditionMet = !this.isConditionMet;
      // 打印修改成本配置数据
      console.log('agentPolicyCostInfo----->313', this.agentPolicyCostInfo);
      // 修改成本配置数据接口
      const result = await this.$zx.common_api.editUpdateAgentCost(
        this.agentNo,
        {
          policyInfoList: this.agentPolicyCostInfo,
        }
      );
      console.log('editUpdateAgentCost----->318', result);
      // 修改成功后提示
      uni.showToast({
        title: '修改成功',
        duration: 2000,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  &__title {
    font-weight: bold;
  }
  .list-item {
    align-items: center;
    padding: 12rpx 0rpx;
  }
}
.bg {
  background-color: #f6f6f6;
  padding: 12rpx 20rpx;
  border-radius: 10rpx;
}
// 内容样式
::v-deep .swiper {
  height: 740rpx;
  padding: 20rpx;
  background-color: white;
  .config_content {
    display: flex;
    align-items: center;
    .config_input {
      width: 100rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      background: #f6f6f6;
      border: 0rpx solid #dcdfe6;
      .u-input__input {
        text-align: center;
        font-size: 28rpx;
      }
    }
    text {
      margin-left: 10rpx;
    }
  }
}
// 按钮
::v-deep .handle {
  padding: 40rpx 0rpx;
  display: flex;
  left: 50%;
  position: fixed;
  bottom: 40rpx;
  transform: translateX(-50%);
  .custom {
    color: white;
    background: #9d60ff;
    margin-right: 60rpx;
  }
  .anniu {
    padding: 44rpx 80rpx;
  }
}
</style>
